<template>
    <div>
        <van-search
                v-model="value"
                show-action
                placeholder="请输入搜索关键词"
                @cancel="onCancel"
        />

        <div class="cinema" :style="{height:height}">
            <ul>
                <li v-for="(item,index) in scanCinema" :key="item.cinemaId">
                    {{item.name}}
                </li>
            </ul>
        </div>

    </div>
</template>

<script>
    import Vue from 'vue';
    import betterscroll from 'better-scroll'
    import { Search } from 'vant';

    Vue.use(Search);
    export default {
        name: "search",
        data(){
            return{
                value:'',
            }
        },
        computed:{
            scanCinema(){
                if(this.value === '') return []
                return this.$store.state.cinemaList.filter(item=>item.name.toUpperCase().includes(this.value.toUpperCase()) || item.address.toUpperCase().includes(this.value.toUpperCase()))
            }
        },
        mounted() {
            if(this.$store.state.cinemaList.length === 0){
                console.log('看看列表',this.$store.state.cinemaList)
                console.log('看看列表 城市ID',this.$store.state.cityID)
                //请求
                this.$store.dispatch('getCinemaList',this.$store.state.cityID).then(res=>{
                    console.log('看看在 res里面',this.myList);
                    this.$nextTick(()=>{
                        new betterscroll('.cinema',{
                            scrollbar:{
                                fade: true,
                            },
                        });
                    });
                });
                console.log('看看列表2222222',this.myList)
            }else{
                this.$nextTick(()=>{
                    new betterscroll('.cinema',{
                        scrollbar:{
                            fade: true,
                        },
                    });
                });
            }
        },
        methods:{
            onCancel(){
                this.$router.replace('/cinema')
            }
        }
    }
</script>

<style scoped>
    .cinema{overflow: hidden;position: relative;}
</style>